import React, { useState } from "react";
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import { Input } from "@rneui/themed";
import IconNavBar from '@/components/IconNavBar'
import { sectokenCommonCenterWhiteProps } from '@/config/navigatorProps'
import { customABI } from '@/utils/transfer'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const CoinAdd = (props) => {

    const [coinContractAddress, setCoinContractAddress] = useState('')
    const [coinSymbol, setCoinSymbol] = useState('')
    const [coinDecimal, setCoinDecimal] = useState('')

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const getDecimalAndSymbol = () => {
        if (coinContractAddress) {
            //查询name和decimal
            let abi1 = 'function decimals()'
            let abi2 = 'function name()'
            let abi3 = 'function symbol()'
            customABI(abi1, 'decimals', coinContractAddress).then(res => {
                let decimal = parseInt(res)
                setCoinDecimal(decimal)
            })
            customABI(abi3, 'symbol', coinContractAddress).then(res => {
                setCoinSymbol(res)
            })
        }
    }

    const handlePressAdd = () => {
        if (coinContractAddress && coinSymbol && coinDecimal) {
            props.navigation.goBack()
        }
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} handlePressLeft={handlePressLeft}
                {...sectokenCommonCenterWhiteProps}
                {...{ title: 'Add Coin', backgroundColor: '#5A72EC', barStyle: 'light-content' }} />
            <View style={{ backgroundColor: '#5A72EC', height: 18 * ratio }}></View>
            <View style={styles.bodyContent}>
                <View style={{ width: 322 * ratio }}>
                    <Text style={styles.title1}>代币合约地址</Text>
                    <Input
                        containerStyle={{ ...styles.text_input, marginTop: 8 * ratio }}
                        onChangeText={text => setCoinContractAddress(text)}
                        onBlur={getDecimalAndSymbol}
                        value={coinContractAddress}
                        inputContainerStyle={{ borderBottomWidth: 0 }}
                        inputStyle={{ fontSize: 14 }}
                    />
                </View>
                <View style={{ width: 322 * ratio, marginTop: 17 * ratio }}>
                    <Text style={styles.title1}>代币符号</Text>
                    <Input
                        containerStyle={{ ...styles.text_input, marginTop: 8 * ratio }}
                        onChangeText={text => setCoinSymbol(text)}
                        value={coinSymbol}
                        inputContainerStyle={{ borderBottomWidth: 0 }}
                        inputStyle={{ fontSize: 14 }}
                    />
                </View>
                <View style={{ width: 322 * ratio, marginTop: 17 * ratio }}>
                    <Text style={styles.title1}>小数精度</Text>
                    <Input
                        containerStyle={{ ...styles.text_input, marginTop: 8 * ratio }}
                        onChangeText={text => setCoinDecimal(text)}
                        value={coinDecimal}
                        inputContainerStyle={{ borderBottomWidth: 0 }}
                        inputStyle={{ fontSize: 14 }}
                    />
                </View>
                <View style={{ flex: 1, justifyContent: 'flex-end', marginBottom: 12 * ratio }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', marginBottom: 84 * ratio }}>
                        <Image source={require('@/assets/imgs/logo.png')} style={{ width: 20 * ratio, height: 18 * ratio }} />
                        <Text style={styles.title2}>Sectoken</Text>
                    </View>
                    <TouchableOpacity style={styles.button} onPress={handlePressAdd}>
                        <Text style={{ ...styles.title1, color: '#FFFFFF' }}>Add</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F6FA'
    },
    bodyContent: {
        flex: 1,
        alignItems: 'center',
        marginTop: 22 * ratio
    },
    text_input: {
        width: 322 * ratio,
        height: 37 * ratio,
        backgroundColor: '#FFFFFF'
    },
    title1: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#000000',
        lineHeight: 19
    },
    title2: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#DADAE3',
        lineHeight: 18
    },
    button: {
        width: 341 * ratio,
        height: 53 * ratio,
        backgroundColor: '#5B6DFD',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5
    }
})
export default CoinAdd